<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;">
      <!-- tabs工具条 -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="商户订单列表" name="first">
          <el-form
            :model="numberValidateForm"
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-row>
              <el-col :span="5">
              <el-form-item label="商户ID:" prop="id">
                <el-input v-model="numberValidateForm.id" disabled></el-input>
              </el-form-item>
              <el-form-item label="平台订单号:" prop="orderId">
                <el-input v-model="numberValidateForm.orderId"  ></el-input>
              </el-form-item>
              <el-form-item label="商户订单号:" prop="orderno">
                <el-input v-model="numberValidateForm.orderno"  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="5">
              <el-form-item label="付款类型:" prop="payType">
                <el-select
                  placeholder="支付宝"
                  clearable
                  v-model="numberValidateForm.payType"
                  class="project"
                >
                  <el-option
                    v-for="item in regionType"
                    :label="item.name"
                    :key="item.code"
                    :value="item.code"
                  ></el-option> 
                </el-select>
              </el-form-item>
              <el-form-item label="付款状态:" prop="payStatus">
                <el-select
                  placeholder="待付款"
                  clearable
                  v-model="numberValidateForm.payStatus"
                  class="project"
                >
                  <el-option
                    v-for="item in payStatus"
                    :label="item.name"
                    :key="item.code"
                    :value="item.code"
                  ></el-option> 
                </el-select>
              </el-form-item>
              </el-col>
               <el-col :span="6">
                  <el-form-item label="状态:" prop="region">
                    <el-select
                      placeholder="待付款"
                      clearable
                      v-model="numberValidateForm.region"
                      class="project"
                    >
                      <el-option
                        v-for="item in region"
                        :label="item.name"
                        :key="item.code"
                        :value="item.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="">
                    <p style="height:36px;"></p>
                  </el-form-item>
              </el-col>
             <el-col :span="15">
              <el-form-item label="日期段:">
                <el-date-picker
                  v-model="numberValidateForm.startTime"
                  type="datetime"
                  :picker-options="pickerOptions"
                  value-format = "yyyy-MM-dd HH:mm:ss"
                  @change="end"
                  placeholder="选择日期时间">
                </el-date-picker>~
                <el-date-picker
                  v-model="numberValidateForm.endTime"
                  type="datetime"
                  :picker-options="pickerOptions"
                  value-format = "yyyy-MM-dd HH:mm:ss"
                  @change="start"
                  placeholder="选择日期时间">
                </el-date-picker> 
                <el-button type="primary" class="checkBtn" @click="checkList()" style="margin-left:20px;">查询</el-button>
              </el-form-item>
              </el-col>
            </el-row>
          </el-form> 

          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="index" align="center"></el-table-column>
              <!-- <el-table-column prop="orderId" label="订单ID" align="center" width="260"></el-table-column> -->
              <el-table-column prop="merchantId" align="center" label="商户ID" width="100"></el-table-column>
              <el-table-column prop="merchantName" label="商户" align="center" width="80"></el-table-column>
              <el-table-column prop="receiverId" label="承兑商ID" align="center" width="120"></el-table-column>
              <el-table-column prop="receiverName" label="承兑商" align="center" width="120"></el-table-column>
              <el-table-column prop="merchantOrderId" label="商户订单号" align="center" width="150"></el-table-column>
              <el-table-column prop="orderId" label="订单号" align="center" width="180"></el-table-column>
              <el-table-column prop="orderType" label="订单类型" align="center" width="120">
                  <template slot-scope="scope">
                      {{getOrderType(scope.row.orderType)}}
                  </template> 
              </el-table-column>
              <el-table-column prop="currency" label="币种" align="center" width="120"></el-table-column>
              <!-- <el-table-column prop="poundage" label="付款参考编号" align="center" width="120"></el-table-column> -->
              <el-table-column prop="payType" label="付款类型" align="center" width="120">
                  <template slot-scope="scope">
                      {{getPayType(scope.row.payType)}}
                  </template> 
              </el-table-column>
              <el-table-column prop="payStatus" label="付款状态" align="center" width="120">
                  <template slot-scope="scope">
                      {{getpayStatus(scope.row.payStatus)}}
                  </template> 
              </el-table-column>
              <!-- <el-table-column prop="poundage" label="订单数量" align="center" width="120"></el-table-column> -->
              <!-- <el-table-column prop="unitPrice" label="单价" align="center" width="120"></el-table-column> -->
              <el-table-column prop="totalPrice" label="金额" align="center" width="120"></el-table-column>
              <el-table-column prop="poundage" label="手续费" align="center" width="120"></el-table-column>
              <el-table-column prop="payTime" label="付款时间" align="center" width="180"></el-table-column>
              <el-table-column prop="payExpireTime" label="付款到期时间" align="center" width="180"></el-table-column>
              <el-table-column prop="passTime" label="放行时间" align="center" width="180"></el-table-column>
              <el-table-column prop="passExpireTime" label="放行到期时间" align="center" width="180"></el-table-column>
              <el-table-column prop="endTime" label="截至时间" align="center" width="180"></el-table-column>
              <el-table-column prop="createTime" label="时间" align="center" width="180"></el-table-column>
              <el-table-column prop="status" label="状态" align="center" width="120">
                  <template slot-scope="scope">
                      {{getStatus(scope.row.status)}}
                  </template> 
              </el-table-column>
            </el-table>
            <div class="block">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageIndexChange"
              :current-page="pageIndex"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal"
            ></el-pagination>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
    </transition>
  </section>
</template>
<script>
import enums from '../../common/Enum'
import DataUtil from "../../common/dataUtil";
import { getMerchantOrderList ,resetMerchantOrderList} from "@/api/index.js";

export default {
  data() {
    return {
      pickerOptions :{
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
      },
      gridLoading: false,
      activeName: "first",
      pageIndex: this.$store.getters.getUserListIndex,
      pageSize: 10,
      dataTotal: 0,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: ""
      },
      numberValidateForm: {
        id : JSON.parse(DataUtil.userInfo()).id,
        orderno : '',
        payType : '',
        payStatus : '',
        region : '',
        orderId : '',
        startTime: DataUtil.formatUnixDateMin(new Date()),
        endTime: DataUtil.formatUnixDateMax(new Date())
      },
      region : enums.status,
      regionType : enums.payType,
      payStatus : enums.payStatus,
      tableData: [],
      OrderType : [{
         code : "1",
          name : '卖出'
      }],
    };
  },
  methods: {
    pageIndexChange(val) {
				this.pageIndex = val;
				this.$store.dispatch('getUserListIndex', val)
				this.checkList();
    },
    pageSizeChange(val) {
    },
    checkList() {
      this.bindGrid();
    },
    getStatus(type){
      return enums.getStatus(type);
    },
    getOrderType(val){
        let re = '';
        this.OrderType.forEach(function(obj) {
          if (obj.code == val) {
            re = obj.name;
            return
          }
        });
        return re
    },
    getPayType(type){
      return enums.getpayType(type);
    },
    getpayStatus(type){
      return enums.getpayStatus(type);
    },
    end(e){
      this.numberValidateForm.startTime = e;
    },
    start(e){
      this.numberValidateForm.endTime = e;
    },
    //////获取商户订单列表
    bindGrid() {
      if( this.numberValidateForm.startTime && this.numberValidateForm.endTime){ 
          if(this.numberValidateForm.startTime > this.numberValidateForm.endTime){
              this.$message.error("开始时间不能大于结束时间！");
              return
          }
      }else{
        this.numberValidateForm.startTime = '';
        this.numberValidateForm.endTime = '';
      }
      const formData = new FormData();
         this.gridLoading = true;
          formData.append('pageNum',this.pageIndex);
          formData.append('status',this.numberValidateForm.region);
          formData.append('merchantOrderId',this.numberValidateForm.orderno);
          formData.append('orderId',this.numberValidateForm.orderId);
          formData.append('payType',this.numberValidateForm.payType);
          formData.append('payStatus',this.numberValidateForm.payStatus);
          formData.append('minTime',this.numberValidateForm.startTime);
          formData.append('maxTime',this.numberValidateForm.endTime);
          formData.append('merchantId',JSON.parse(DataUtil.userInfo()).id);
          getMerchantOrderList(formData).then(response => {
            if ('01001' == response.status) {
              this.gridLoading = false;
              if(response.data){
                this.tableData = response.data.dataList;
                this.dataTotal = response.data.page.recordCount;
                // formData.delete("pageNum");
                // formData.delete('merchantId');
                // formData.delete('status');
                // formData.delete('merchantOrderId');
                // formData.delete('orderId');
                // formData.delete('payType');
                // formData.delete('payStatus');
                // formData.delete('minTime');
                // formData.delete('maxTime');
              }else {
                this.gridData = [];
                this.dataTotal = 0;
              }
            } else {
                // formData.delete("pageNum");
                // formData.delete('merchantId');
                // formData.delete('status');
                // formData.delete('merchantOrderId');
                // formData.delete('orderId');
                // formData.delete('payType');
                // formData.delete('payStatus');
                // formData.delete('minTime');
                // formData.delete('maxTime');
                this.$message.error(response.msg);
            }
          }, response => {
            this.gridLoading = false;
          });
    },
  },
  mounted: function() {
      this.pageIndex = 1;
      this.bindGrid();
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
</style>
